<!--
 * @Description:
 * @Author: ZachGmy
 * @Date: 2020-09-03 09:57:40
 * @LastEditors: lxy 2110251760@qq.com
 * @LastEditTime: 2022-06-29 15:43:32
-->
<!--2，实时疫情-->
<template>
  <div class="realTime">
    <!--全国各地核酸检测机构数量柱状图   在css中，如果有一些运算处理，放在calc中处理  vh视窗高度-->
    <div id="container" style="height: calc(100vh / 2)"></div>
    <div style="display: flex; justify-content: space-around">
      <!-- 国内疫情数据3d环形图 -->
      <div id="realtime_continer" style="height: calc(100vh / 2)"></div>
      <!-- 国外疫情数据3d环形图 -->
      <div id="continer3" style="height: calc(100vh / 2)"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { get } from "@/utils/request";
export default {
  data() {
    return {
      currentConfirmedCount: 0,
      curedCount: 0,
      deadCount: 0,
      confirmedCount: 0,
       currentConfirmedCount1: 0,
      curedCount1: 0,
      deadCount1: 0,
      confirmedCount1: 0,
    };
  },

  mounted() {
    this.getNum();
    this.getPosition();
    this.getData2();
    this.getData3();
    Highcharts.setOptions({
      global: {
        useUTC: false,
      },
    });
  },

  methods: {
    getPosition() {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=6f46fea09e825b0b",
      }).then((res) => {
        let Position = res.data.data;
        this.Position = Position.map((item) => {
          //  console.log(item.currentConfirmedCount);
          return (Position = item.provinceShortName);
        });
        this.getMap();
      });
    },
    getNum() {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=6f46fea09e825b0b",
      }).then((res) => {
        let Num = res.data.data;
        this.Num = Num.map((item) => {
          return (Num = item.detectOrgCount);
        });
        this.getMap();
      });
    },

    getMap() {
      Highcharts.chart("container", {
        chart: {
          type: "column",
        },
        title: {
          text: "全国各地核酸检测机构数量",
        },
        subtitle: {
          text: "数据来源：广西科技大学",
        },
        xAxis: {
          categories: this.Position,
          type: "category",
          labels: {
            rotation: -45, // 设置轴标签旋转角度
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "核酸检测机构数量（个）",
          },
        },
        legend: {
          enabled: false,
        },
        tooltip: {
          pointFormat: "该地区核酸检测机构数量{point.y:.0f} 个</b>",
        },
        series: [
          {
            data: this.Num,
            name: this.Position,
            dataLabels: {
              enabled: true,
              rotation: -90,
              color: "#FFFFFF",
              align: "right",
              format: "{point.y:.0f}", // :.1f 为保留 1 位小数
              y: 10,
            },
          },
        ],
      });
    },
 
    async getData2() {
      axios({
        url: "http://api.tianapi.com/ncov/index?key=49a9fb54da10d07aafc3a57f227cdf60",
      }).then((res) => {
        // console.log(res.data.newslist[0].desc.currentConfirmedCount);
        // let Position = res.data.data;
        this.currentConfirmedCount =
          res.data.newslist[0].desc.currentConfirmedCount;
        this.curedCount = res.data.newslist[0].desc.curedCount;
        this.deadCount = res.data.newslist[0].desc.deadCount;
        this.confirmedCount = res.data.newslist[0].desc.confirmedCount;
        //  console.log(typeof this.currentConfirmedCount);
        this.getMap2();
      });
    },
    getMap2() {
      Highcharts.chart("realtime_continer", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
          },
        },
        title: {
          text: "国内疫情综合数据",
        },
        subtitle: {
          text: "整个环形图代表全国累计确诊人数 " + this.confirmedCount,
        },

        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45,
          },
        },
        colors: ["#058DC7", "#50B432", "#000"],
        series: [
          {
            name: "人数",

            data: [
              ["现存确诊人数", this.currentConfirmedCount],
              ["累计治愈人数", this.curedCount],
              ["累计死亡人数", this.deadCount],
            ],
          },
        ],
      });
    },
    getMap3() {
      Highcharts.chart("continer3", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
          },
        },
        title: {
          text: "国外疫情统计数据",
        },
        subtitle: {
          text: "整个环形图代表国外累计确诊人数 " + this.confirmedCount1,
        },

        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45,
          },
        },
        colors: ["#058DC7", "#50B432", "#000"],
        series: [
          {
            name: "人数",

            data: [
              ["现存确诊人数", this.currentConfirmedCount1],
              ["累计治愈人数", this.curedCount1],
              ["累计死亡人数", this.deadCount1],
            ],
          },
        ],
      });
    },
    async getData3() {
      axios({
        url: "http://api.tianapi.com/ncov/index?key=49a9fb54da10d07aafc3a57f227cdf60",
      }).then((res) => {
      
        console.log(res.data.newslist[0].desc.foreignStatistics);
        this.currentConfirmedCount1 =
          res.data.newslist[0].desc.foreignStatistics.currentConfirmedCount;
       
        this.curedCount1 = res.data.newslist[0].desc.foreignStatistics.curedCount;
        this.deadCount1 = res.data.newslist[0].desc.foreignStatistics.deadCount;
        this.confirmedCount1= res.data.newslist[0].desc.foreignStatistics.confirmedCount;
  
        this.getMap3();
      });
    },
  },

};
</script>

<style scoped>
</style>
